{% extends "template_base.html" %}
{% load staticfiles %}



{% block about_content %}
  <div class="about-parlex" id="about">
    <section class="parlex7-back">
      <div class="w-container">
        <div id="about-animation">
        <div class="wrap">
          <div class="about">
            <h1 class="about-heading">ABOUT</h1>
            <div class="about-text">WHO WE ARE ?</div>
            <div class="sepreater"></div>
          </div>
          <p class="about-des">We are Elegance. We create stunning identities for our clients that people fall in love with.&nbsp;
            <br>Whether it's an app icon, a logo for a hot startup, or just an illustration, we'll work hard until you can't help but say "WOW!". 
          </p>
		  <img  class="about-img" src="{%static "images/about.png" %}"  alt="about.png">
        </div>
      </div>
     </div>
    </section>
  </div>

{% endblock %}

{% block service_content %}
 <section class="service-parlex" id="service">
    <section class="parlex-back">
      <div class="w-container">
        <div class="wrap">
          <div class="service-combo">
            <div class="services">
              <h1 class="service-heading">SERVICES</h1>
              <div class="services-text">WHAT WE DO?</div>
              <div class="sepreater service"></div>
            </div>
            <div class="services-text">“ THE BEST RESULTS ARE OBTAINED BY TASKING THE RIGHT PEOPLE TO THE RIGHT PROJECT ”
              <br>We understand that everybody has their unique strengths and we put that knowledge to use by assembling the most efficient team possible for your project. You know your business better than anyone. Your insights, combined with our skills
              and creativity, will result in branding and marketing that truly stand out. We’re ready to get started.</div>
            <div class="w-row">
              <div class="w-col w-col-3 services-column">
                <div class="service-icon">
				  <img  src="{%static "images/services/Web-Design-Development.png" %}" >
                </div>
                <h4 class="service-head">WEB DESIGN &amp; DEVELOPMENT</h4>
              </div>
              <div class="w-col w-col-3">
                <div class="service-icon">
                  <img  src="{%static "images/services/Branding-Identity.png" %}" >
                </div>
                <h4 class="service-head">Branding/Positioning &amp; IDENTITY</h4>
              </div>
              <div class="w-col w-col-3">
                                <div class="service-icon">
                  <img  src="{%static "images/services/Motion-Video.png" %}" >
                </div>
                <h4 class="service-head">Marketing Communications</h4>
              </div>
              <div class="w-col w-col-3">
                <div class="service-icon">
				  <img  src="{%static "images/services/UX-UI.png" %}" >
                </div>
                <h4 class="service-head">UI/UX Design<br>Mobile Design</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </section>

{% endblock %}		

{% block procduct_content %}
  <div class="portfolio-parlex" id="product">
    <div class="parlex3-back">
      <div class="w-container">
        <div class="wrap">
          <div class="portfolio">
            <h1 class="portfolio-heading">PRODUCT</h1>
            <div class="portfolio-text">OUR WORK</div>
            <div class="sepreater"></div>
          </div>
          <p class="porfolio-paragraph">THE BEST RESULTS ARE OBTAINED BY TASKING THE RIGHT PEOPLE TO THE RIGHT PROJECT
            <br>We do what we love. Our clients love what we do.</p>
            <div class="container demo-1">
      <ul class="grid cs-style-1">
        <li>
          <figure>
            <!--img class="portfolio-images" src="{%static "images/portfolio/1.png" %}" alt="img01"-->
			<img class="portfolio-images" src="{%static "images/product/1.jpg" %}" alt="img01.png">
            <figcaption>
              <h3>Camera</h3>
              <span>Jacob Cummings</span>
              <a href="javascript:void(0)" onclick="downloadfile('MAS001_150415_low.pdf')" >Download File</a>
            </figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img class="portfolio-images" src="{%static "images/product/1.jpg" %}" alt="img02.png">
            <figcaption>
              <h3>Music</h3>
              <span>Jacob Cummings</span>
              <a href="javascript:void(0)" onclick="downloadfile('MAS001_150415_low.pdf')" >Download File</a>
            </figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img class="portfolio-images" src="{%static "images/product/1.jpg" %}" alt="img03.png">
            <figcaption>
              <h3>Settings</h3>
              <span>Jacob Cummings</span>
              <a href="javascript:void(0)" onclick="downloadfile('MAS001_150415_low.pdf')" >Download File</a>
            </figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img class="portfolio-images" src="{%static "images/product/1.jpg" %}" alt="img02.png">
            <figcaption>
              <h3>Safari</h3>
              <span>Jacob Cummings</span>
              <a href="javascript:void(0)" onclick="downloadfile('MAS001_150415_low.pdf')" >Download File</a>
            </figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img class="portfolio-images" src="{%static "images/product/1.jpg" %}" alt="img02.png">
            <figcaption>
              <h3>Phone</h3>
              <span>Jacob Cummings</span>
              <a href="javascript:void(0)" onclick="downloadfile('MAS001_150415_low.pdf')" >Download File</a>
            </figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img class="portfolio-images" src="{%static "images/product/1.jpg" %}" alt="img02.png">
            <figcaption>
              <h3>Game Center</h3>
              <span>Jacob Cummings</span>
              <a href="javascript:void(0)" onclick="downloadfile('MAS001_150415_low.pdf')" >Download File</a>
            </figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img class="portfolio-images" src="{%static "images/product/1.jpg" %}" alt="img02.png">
            <figcaption>
              <h3>Game Center</h3>
              <span>Jacob Cummings</span>
              <a href="javascript:void(0)" onclick="downloadfile('MAS001_150415_low.pdf')" >Download File</a>
            </figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img class="portfolio-images" src="{%static "images/product/1.jpg" %}" alt="img02.png">
            <figcaption>
              <h3>Game Center</h3>
              <span>Jacob Cummings</span>
              <a href="javascript:void(0)" onclick="downloadfile('MAS001_150415_low.pdf')" >Download File</a>
            </figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img class="portfolio-images" src="{%static "images/product/1.jpg" %}" alt="img02.png">
            <figcaption>
              <h3>Game Center</h3>
              <span>Jacob Cummings</span>
              <a href="javascript:void(0)" onclick="downloadfile('MAS001_150415_low.pdf')" >Download File</a>
            </figcaption>
          </figure>
        </li>
      </ul>
    </div><!-- /container -->
        </div>
      </div>
    </div>
  </div>

{% endblock %}		

{% block team_content %}
<div class="team-parlex" id="team">
	<div class="parlex5-back">
		<div class="w-container">
			<div class="wrap">
				<div class="team">
					<h1 class="team">TEAM</h1>
					<div class="sepreater team-sep"></div>
				</div>
				<div class="team-text">
					<p class="team-text-para">We are Elegance. We offer creative solutions for every web-based project you can think of.&nbsp;<br>We take pride in our work and everything we create is executed with precision and love.</p>
				</div>
				<div class="w-row team-member">
					<div class="w-col w-col-4">
						<div class="team-section">
							<div class="team-image">
								<img class="team-img" src="{%static "images/team/image1.png" %}"	alt="image1.png">
							</div>
							<div class="team-des">
								<h4 class="team-name">JANE ANISTON</h4>
								<div class="team-name-des">Creative Director</div>
							</div>
							<div class="team-social">
								<div class="w-clearfix social-section">
									<a href="#"><img class="fotter-social" src="{%static "images/social/Facebook.png" %}" alt="Facebook.png"></a>
									<a href="#"><img class="fotter-social" src="{%static "images/social/Twitter.png" %}" alt="Twitter.png"></a>
									<a href="#"><img class="fotter-social" src="{%static "images/social/Linkedin.png" %}" alt="Linkedin.png"></a>
									<a href="#"><img class="fotter-social" src="{%static "images/social/Google-plus.png" %}" alt="Facebook.png"></a>
									<!--a href="#"><img class="fotter-social" src="{%static "images/social/RSS.png" %}" alt="Facebook.png"></a-->
								</div>
							</div>
						</div>
					</div>
					<div class="w-col w-col-4">
						<div class="team-section">
							<div class="team-image">
								<img class="team-img" src="{%static "images/team/image2.png" %}"	alt="image1.png">
							</div>
							<div class="team-des">
								<h4 class="team-name">JOHN DOE</h4>
								<div class="team-name-des">Lead Developer</div>
							</div>
							<div class="team-social">
								<div class="w-clearfix social-section">
									<a href="#"><img class="fotter-social" src="{%static "images/social/Facebook.png" %}" alt="Facebook.png"></a>
									<a href="#"><img class="fotter-social" src="{%static "images/social/Twitter.png" %}" alt="Twitter.png"></a>
									<a href="#"><img class="fotter-social" src="{%static "images/social/Linkedin.png" %}" alt="Linkedin.png"></a>
									<a href="#"><img class="fotter-social" src="{%static "images/social/Google-plus.png" %}" alt="Facebook.png"></a>
									<!--a href="#"><img class="fotter-social" src="{%static "images/social/RSS.png" %}" alt="Facebook.png"></a-->
								</div>
							</div>
						</div>
					</div>
					<div class="w-col w-col-4">
						<div class="team-section">
							<div class="team-image">
								<img class="team-img" src="{%static "images/team/image3.png" %}"	alt="image1.png">
							</div>
							<div class="team-des">
								<h4 class="team-name">TANE NISTON</h4>
								<div class="team-name-des">Graphic Designer</div>
							</div>
							<div class="team-social">
								<div class="w-clearfix social-section">
									<a href="#"><img class="fotter-social" src="{%static "images/social/Facebook.png" %}" alt="Facebook.png"></a>
									<a href="#"><img class="fotter-social" src="{%static "images/social/Twitter.png" %}" alt="Twitter.png"></a>
									<a href="#"><img class="fotter-social" src="{%static "images/social/Linkedin.png" %}" alt="Linkedin.png"></a>
									<a href="#"><img class="fotter-social" src="{%static "images/social/Google-plus.png" %}" alt="Facebook.png"></a>
									<!--a href="#"><img class="fotter-social" src="{%static "images/social/RSS.png" %}" alt="Facebook.png"></a-->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<div class="clients-parlex">
	<div class="parlex6-back">
		<div class="w-container">
			<div class="wrap-client">
				<div class="clients-sub">
					<div id="clients">
			<div class="clients-wrap">
				<ul id="clients-list" class="clearfix">
					<li><img src="{%static "images/clients/client-logo1.png" %}" alt="logo"></li>
					<li><img src="{%static "images/clients/client-logo2.png" %}" alt="logo"></li>
					<li><img src="{%static "images/clients/client-logo3.png" %}" alt="logo"></li>
					<li><img src="{%static "images/clients/client-logo4.png" %}" alt="logo"></li>
					<li><img src="{%static "images/clients/client-logo5.png" %}" alt="logo"></li>
					<li><img src="{%static "images/clients/client-logo6.png" %}" alt="logo"></li>
				</ul>
			</div><!-- @end .clients-wrap -->
		</div><!-- @end #clients -->
				</div>
			</div>
		</div>
	</div>
</div>

{% endblock %}		

{% block contact_content %}

<div class="contact-parlex" id="contact">
	<div class="parlex8-back">
		<div class="w-container">
			<div class="wrap">
				<div class="contact-div">
					<h1 class="contact-heading">CONTACT</h1>
					<div class="sepreater"></div>
				</div>
				<p class="contact-para">Thanks for taking the time to contact us!<br>We do our best to respond to quickly, it could take us 1-2 business days to get back to you. Feel free to say hello!</p>
				<!--div class="w-form">
					<form action="contact.php" method="post">
						<label for="name">Name:</label>
						<input class="w-input" type="text" placeholder="Enter your name" name="cf_name">
						<label for="email">Email Address:</label>
						<input class="w-input" placeholder="Enter your email address" type="text" name="cf_email" required="required">
						<label for="email">Your Message:</label>
						<textarea class="w-input message" placeholder="Enter your Message Here" name="cf_message"></textarea><br>
						<input class="w-button" type="submit" value="Send">
					</form>
					<div class="w-form-done">
						<p>Thank you! Your submission has been received!</p>
					</div>
					<div class="w-form-fail">
						<p>Oops! Something went wrong while submitting the form :(</p>
					</div>
				</div-->
				
				<div class="w-row contact-col">
					<div class="w-col w-col-4 contact-col1">
						<div>
							<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a">
								<a href="#set-5" class="hi-icon hi-icon-earth">Partners</a>
							</div>
							<h4 class="contact-col-head">Visit Us</h4>
						</div>
						<div>
							<div class="contact-col-text">795 Folsom St., Suite 600<br>San Francisco, CA 94107</div>
						</div>
					</div>
					<div class="w-col w-col-4 contact-col2">
						<div>
							<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a">
							<a href="#set-5" class="hi-icon hi-icon-mail">Partners</a>
						</div>
						<h4 class="contact-col-head">Mail us</h4>
						</div>
					<div>
						<div class="contact-col-text">general: office@bingzhao.com<br>support: support@bingzhao.com</div>
					</div>
					</div>
					<div class="w-col w-col-4 contact-col3">
						<div>
							<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a">
							<a href="#set-5" class="hi-icon hi-icon-mobile">Partners</a>
							</div>
						<h4 class="contact-col-head">Call Us</h4>
						</div>
					<div>
						<div class="contact-col-text-bar-last">P: (452) 123-8970
						<br>F: (452) 123-8971</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}

{% block custonjs %}

<script type="text/javascript" src="{%static "js/app.js" %}"></script>
{% endblock %}